<div>
    <div class="doc-intro">
        <h1>Templates</h1>
        <p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p>
    </div>

    <h2>Multi-Purpose Templates</h2>
    <div class="templates-page grid grid-cols-12 gap-4">
        <div class="col-span-12 lg:col-span-6 xl:col-span-4">
            <div class="card mb-0">
                <a href="https://genesis.primeng.org" rel="noopener noreferrer">
                    <img alt="Genesis" src="https://primefaces.org/cdn/primeng/images/layouts/genesis-ng.jpg" class="w-full" />
                </a>
                <div class="flex gap-4 mt-4">
                    <a pButton href="https://genesis.primeng.org" class="flex-1" rel="noopener noreferrer" target="_blank">
                        <span pButtonLabel class="whitespace-nowrap">Preview</span>
                    </a>
                    <a pButton routerLink="/templates/genesis" outlined class="flex-1">
                        <span pButtonLabel class="whitespace-nowrap">Learn More</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <h2>Admin Templates</h2>
    <div class="grid grid-cols-12 gap-4">
        <div class="col-span-12 lg:col-span-6 xl:col-span-4">
            <div class="card mb-0">
                <a href="https://sakai.primeng.org" rel="noopener noreferrer" target="_blank">
                    <img alt="sakai" src="https://primefaces.org/cdn/primeng/images/layouts/sakai-ng.jpg" class="w-full" />
                </a>
                <div class="flex gap-4 mt-4">
                    <a pButton href="https://sakai.primeng.org" class="flex-1" rel="noopener noreferrer" target="_blank">
                        <span pButtonLabel class="whitespace-nowrap">Preview</span>
                    </a>
                    <a pButton [routerLink]="'/templates/sakai'" outlined class="flex-1">
                        <span pButtonLabel class="whitespace-nowrap">Learn More</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-span-12 lg:col-span-6 xl:col-span-4">
            <div class="card mb-0">
                <a href="https://poseidon.primeng.org" rel="noopener noreferrer" target="_blank">
                    <img alt="Poseidon" src="https://primefaces.org/cdn/primeng/images/layouts/poseidon-ng.jpg" class="w-full" />
                </a>
                <div class="flex gap-4 mt-4">
                    <a pButton href="https://poseidon.primeng.org" class="flex-1" rel="noopener noreferrer" target="_blank">
                        <span pButtonLabel class="whitespace-nowrap">Preview</span>
                    </a>
                    <a pButton [routerLink]="'/templates/poseidon'" outlined class="flex-1">
                        <span pButtonLabel class="whitespace-nowrap">Learn More</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-span-12 lg:col-span-6 xl:col-span-4">
            <div class="card mb-0">
                <a href="https://apollo.primeng.org" rel="noopener noreferrer" target="_blank">
                    <img alt="Apollo" src="https://primefaces.org/cdn/primeng/images/layouts/apollo-ng.jpg" class="w-full" />
                </a>
                <div class="flex gap-4 mt-4">
                    <a pButton href="https://apollo.primeng.org" class="flex-1" rel="noopener noreferrer" target="_blank">
                        <span pButtonLabel class="whitespace-nowrap">Preview</span>
                    </a>
                    <a pButton [routerLink]="'/templates/apollo'" class="flex-1" outlined rel="noopener noreferrer">
                        <span pButtonLabel class="whitespace-nowrap">Learn More</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-span-12 lg:col-span-6 xl:col-span-4">
            <div class="card mb-0">
                <a href="https://diamond.primeng.org" rel="noopener noreferrer" target="_blank">
                    <img alt="Diamond" src="https://primefaces.org/cdn/primeng/images/layouts/diamond-ng.jpg" class="w-full" />
                </a>
                <div class="flex gap-4 mt-4">
                    <a pButton href="https://diamond.primeng.org" class="flex-1" rel="noopener noreferrer" target="_blank">
                        <span pButtonLabel class="whitespace-nowrap">Preview</span>
                    </a>
                    <a pButton [routerLink]="'/templates/diamond'" class="flex-1" outlined>
                        <span pButtonLabel class="whitespace-nowrap">Learn More</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-span-12 lg:col-span-6 xl:col-span-4">
            <div class="card mb-0">
                <a href="https://atlantis.primeng.org" rel="noopener noreferrer" target="_blank">
                    <img alt="Atlantis" src="https://primefaces.org/cdn/primeng/images/layouts/atlantis-ng.jpg" class="w-full" />
                </a>
                <div class="flex gap-4 mt-4">
                    <a pButton href="https://atlantis.primeng.org" class="flex-1" rel="noopener noreferrer" target="_blank">
                        <span pButtonLabel class="whitespace-nowrap">Preview</span>
                    </a>
                    <a pButton [routerLink]="'/templates/atlantis'" class="flex-1" outlined>
                        <span pButtonLabel class="whitespace-nowrap">Learn More</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-span-12 lg:col-span-6 xl:col-span-4">
            <div class="card mb-0">
                <a href="https://ultima.primeng.org" rel="noopener noreferrer" target="_blank">
                    <img alt="Ultima" src="https://primefaces.org/cdn/primeng/images/layouts/ultima-ng.jpg" class="w-full" />
                </a>
                <div class="flex gap-4 mt-4">
                    <a pButton href="https://ultima.primeng.org" class="flex-1" rel="noopener noreferrer" target="_blank">
                        <span pButtonLabel class="whitespace-nowrap">Preview</span>
                    </a>
                    <a pButton [routerLink]="'/templates/ultima'" class="flex-1" outlined>
                        <span pButtonLabel class="whitespace-nowrap">Learn More</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-span-12 lg:col-span-6 xl:col-span-4">
            <div class="card mb-0">
                <a href="https://freya.primeng.org" rel="noopener noreferrer" target="_blank">
                    <img alt="Freya" src="https://primefaces.org/cdn/primeng/images/layouts/freya-ng.jpg" class="w-full" />
                </a>
                <div class="flex gap-4 mt-4">
                    <a pButton href="https://freya.primeng.org" class="flex-1" rel="noopener noreferrer" target="_blank">
                        <span pButtonLabel class="whitespace-nowrap">Preview</span>
                    </a>
                    <a pButton [routerLink]="'/templates/freya'" class="flex-1" outlined>
                        <span pButtonLabel class="whitespace-nowrap">Learn More</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="col-span-12 lg:col-span-6 xl:col-span-4">
            <div class="card mb-0">
                <a href="https://verona.primeng.org" rel="noopener noreferrer" target="_blank">
                    <img alt="Verona" src="https://primefaces.org/cdn/primeng/images/layouts/verona-ng.jpg" class="w-full" />
                </a>
                <div class="flex gap-4 mt-4">
                    <a pButton href="https://verona.primeng.org" class="flex-1" rel="noopener noreferrer" target="_blank">
                        <span pButtonLabel class="whitespace-nowrap">Preview</span>
                    </a>
                    <a pButton [routerLink]="'/templates/verona'" class="flex-1" outlined>
                        <span pButtonLabel class="whitespace-nowrap">Learn More</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="col-span-12 lg:col-span-6 xl:col-span-4">
            <div class="card mb-0">
                <a href="https://avalon.primeng.org" rel="noopener noreferrer" target="_blank">
                    <img alt="Avalon" src="https://primefaces.org/cdn/primeng/images/layouts/avalon-ng.jpg" class="w-full" />
                </a>
                <div class="flex gap-4 mt-4">
                    <a pButton href="https://avalon.primeng.org" class="flex-1" rel="noopener noreferrer" target="_blank">
                        <span pButtonLabel class="whitespace-nowrap">Preview</span>
                    </a>
                    <a pButton [routerLink]="'/templates/avalon'" class="flex-1" outlined>
                        <span pButtonLabel class="whitespace-nowrap">Learn More</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
